<template>
  <div id="coupon_manage" class="container">
    <div class="content">
      <!-- <div class="title">优惠券管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select
              v-model="tabledisplayObj.couponType"
              clearable
              placeholder="选择券种"
              style="width: 1.8rem;"
            >
              <el-option
                v-for="item in couponTypeList"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>&emsp;
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 优惠券名称"
              v-model="tabledisplayObj.couponName"
              class="input_search"
              clearable
            ></el-input>
            <div @click="searchCoupon()" v-if="hasApi('couponList')" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div
              v-if="isShowBtn && hasApi('couponAdd')"
              class="right_btn"
              @click="openAdd"
            >新&nbsp&nbsp增</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">优惠券名称</td>
                <td style="width: 2rem;">券种</td>
                <td style="width: 2rem;">优惠面额</td>
                <td style="width: 4rem;">优惠期限</td>
                <td style="width: 2rem;">发行数量</td>
                <td style="width: 2rem;">领取数量</td>
                <td style="width: 2rem;">使用数量</td>
                <td style="width: 2rem;">活动状态</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in couponList">
                <td>{{item.couponName}}</td>
                <td>{{item.couponTypeName}}</td>
                <td v-if="item.couponType == 1">{{item.couponValue}}折</td>
                <td v-else>￥{{item.couponValue}}</td>
                <td v-if="item.couponTermMode == 1">{{item.termStartTime}} - {{item.termEndTime}}</td>
                <td v-else>领取之后{{item.termDay}}日内有效</td>
                <td>{{item.issueNum}}</td>
                <td>{{item.obtainNum}}</td>
                <td>{{item.useNum}}</td>
                <td>{{item.couponStateName}}</td>
                <td>
                  <span
                    v-if="item.couponState == 2"
                    class="operate_btn"
                    style="color:#67C23A;"
                    @click="handleExtension(index,item)"
                  >推广&nbsp;</span>
                  <span
                    v-if="item.couponState != 1 &&  hasPage('35')"
                    class="operate_btn"
                    @click="handleData(index,item)"
                  >数据&nbsp;</span>
                  <span
                    v-if="isShowBtn && item.couponState == 1 &&  hasApi('couponUpdate')"
                    class="operate_btn"
                    @click="handleEdit(index,item)"
                  >编辑&nbsp;</span>
                  <span
                    v-if="isShowBtn && item.couponState == 2 &&  hasApi('couponUpdate')"
                    class="operate_btn"
                    @click="handleDown(index,item)"
                  >下架&nbsp;</span>
                  <span
                    v-if="isShowBtn && item.couponState == 1 &&  hasApi('couponUpdate')  && item.isCanUp"
                    class="operate_btn"
                    @click="handleUp(index,item)"
                  >上架&nbsp;</span>
                  <span v-if="isShowBtn" class="operate_btn" @click="handleLook(index,item)">详情</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
        <createCoupon ref="createCoupon" @callback="closeAdd"></createCoupon>
        <extension ref="extension" @callback="closeExtension"></extension>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import createCoupon from "./common/createCoupon";
import extension from "./common/extension";
let vm;
let user;
export default {
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        couponType: "",
        couponName: "",
        campusId: ""
      },
      isShowBtn: false,
      couponList: [],
      couponTypeList: [],
      couponStateList: []
    };
  },
  components: {
    createCoupon,
    extension
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      vm.tabledisplayObj.campusId = vm.$store.state.campusId;
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取课程类别列表
     */
    getData(paras) {
      let coupontemp = []; //临时存放列表
      api.couponList(paras).then(function(data) {
        //枚举科目列表
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.isCanUp = true;
            console.log(item.termEndTime);
            if (item.termEndTime != null && item.couponTermMode == 1) {
              let selectTime =
                new Date(item.termEndTime.replace(/-/g, "/")).getTime() +
                86400000;//由于默认返回00:00 所以在原有时间加上一天的毫秒
              console.log(selectTime);
              let currentTime = new Date().getTime();
              item.isCanUp = currentTime < selectTime;
            }
            item.termStartTime =
              item.termStartTime == null
                ? ""
                : item.termStartTime.split(" ")[0];
            item.termEndTime =
              item.termEndTime == null ? "" : item.termEndTime.split(" ")[0];
            for (let couponStateItem of vm.couponStateList) {
              if (couponStateItem.value == item.couponState) {
                item.couponStateName = couponStateItem.name;
                break;
              }
            }
            for (let couponTypeItem of vm.couponTypeList) {
              if (couponTypeItem.value == item.couponType) {
                item.couponTypeName = couponTypeItem.name;
                break;
              }
            }
          });
          vm.couponList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "error"
          });
        }
      });
    },
    openAdd() {
      vm.$refs.createCoupon.init({});
    },
    campusChange: function(campusId) {
      vm.tabledisplayObj.campusId = campusId;
      this.getData(vm.tabledisplayObj);
    },
    closeAdd(data) {
      console.log(data);
      if (data == "添加成功") {
        vm.$emit("campusUpdate");
      }
      this.initData();
    },
    closeExtension(data) {},
    pageSizeChange: function(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      this.getData(vm.tabledisplayObj);
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      console.log(val);
      vm.tabledisplayObj.currPage = val;
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 数据
     */
    handleData(index, row) {
      var path = vm.$store.state.permit["35"].path;
      //传递参数
      this.$router.push({
        path: path,
        query: { couponId: tool.encode(row.couponId) }
      });
    },
    /**
     * 推广
     */
    handleExtension(index, row) {
      vm.$refs.extension.init(row);
    },
    /**
     * 上架
     */
    handleUp(index, row) {
      var paras = {
        couponId: row.couponId,
        couponState: 2
      };
      api.couponUpdate(paras).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          vm.$message({
            message: "上架成功",
            type: "success"
          });
          vm.initData();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * 点击查看
     */
    handleLook(index, row) {
      console.log(index, row);
      let data = tool.clone(row);
      data.isShow = true;
      vm.$refs.createCoupon.init(data);
    },
    /**
     * 点击编辑
     */
    handleEdit(index, row) {
      console.log(index, row);
      vm.$refs.createCoupon.init(tool.clone(row));
    },
    /**
     * 下架
     */
    handleDown(index, row) {
      this.$confirm("此操作将下架该优惠券, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          var paras = {
            couponId: row.couponId,
            couponState: 3
          };
          api.couponUpdate(paras).then(function(data) {
            console.log(data);
            if (data.resultCode == 2000) {
              vm.$message({
                message: "下架成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 搜索
     */
    searchCoupon() {
      vm.tabledisplayObj.currPage = 1;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.couponStateList = dicdata["coupon_state"];
    vm.couponTypeList = dicdata["coupon_type"];
    console.log(user.roleMode);
    if (user.roleMode == 2) {
      vm.isShowBtn = true;
    }
    this.initData();
  }
};
</script>

<style lang="scss">
#coupon_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>